<template>
	<view>
				<view class="model-box">
					<view class="model-item sale" @click="jump('noSingle')">
							<!-- <view class="mark">6</view> -->
						<image class="model-icon" src="/static/image/index/noSingle.png" mode="aspectFit">
						</image>
						<view class="model-text">
							采购无单收货
						</view>
					</view>
					<view class="model-item buy" @click="jump">
						<!-- <view class="mark">6</view> -->
						<image class="model-icon" src="/static/image/index/noSingle.png" mode="aspectFit">
						</image>
						<view class="model-text">
							外协无单收货
						</view>
					</view>
					<view class="model-item home" @click="jump">
						<!-- <view class="mark">6</view> -->
						<image class="model-icon" src="/static/image/index/noSingle.png" mode="aspectFit">
						</image>
						<view class="model-text">
							委外无单收货
						</view>
					</view>
					</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			jump: function(name) {
				 if(name == 'noSingle'){
						uni.navigateTo({
							url: '/subcontractList/storage/purchaseNo/index'
						});
					}else{
						uni.showToast({
							title: '该功能暂未开放',
							icon: 'none',
							duration: 2000
						});
					}
					
				},
			
		}
	}
</script>

<style lang="scss" scoped>
.model-box {
		width: calc(100% - 50rpx);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 25rpx;
		margin-top: 3vh;
		border-radius: 10rpx;
		overflow: hidden;

		.model-item {
			width: calc(34% - 15rpx);
			height: 20vh;
			margin-bottom: 10rpx;	
			border-radius: 10rpx;
			.model-icon {
				width: 40%;
				height: 40%;
				display: block;
				margin: 0 auto;
				margin-top:18%;
			}
			.mark{
				 z-index: 9999;
				  width: 60rpx;
				  height: 35rpx;
				  color: white;
				  border-radius: 16rpx;
				  background: red;
				  font-size: 24rpx;
				  display: flex;
				  justify-content: center;
				  align-items: center;
				  position: absolute;
				  top: 65rpx;
				  left: 145rpx;
				  
			}

			.model-text {
				text-align: center;
				color: white;
				line-height: 80rpx;
				font-size: 30rpx;
			}
		}

		.model-item:nth-child(2n) {
			margin-right: 0;
		}

		.sale {
			background-color: #efc561;
		}

		.buy {
			background-color: #95e071;
		}

		.home {
			background-color: #d3a87b;
		}

	}
</style>
